<!--
 * @Author: panda-hbd 10254515+panda-hbd@user.noreply.gitee.com
 * @Date: 2022-11-13 14:42:09
 * @LastEditors: panda-hbd 1511539537@qq.com
 * @LastEditTime: 2022-11-16 13:20:08
 * @FilePath: \text-online-system2\src\views\Talk.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  
    <div class="discusstion">
  
    <!-- 左侧框 -->
    <el-card class="box-card left">
                  <template #header>
                  <div class="card-header" >
                      <span>讨论区</span>
                  </div>
                  </template>
  
                  <div  class="top" >
                      <span class = "notice">欢迎大家来到讨论区！本讨论区供各位同学就课程问题进行交流学习。</span>
                      <div class="pulish_btn" @click="dialogVisible=true"><el-button type="primary" plain size="large">发布主题</el-button></div>
                  </div>
                
        
    <!-- 发布框 -->
    <el-dialog v-model="dialogVisible" title="发布主题">
  
  
      <el-form :model="form">
        <el-form-item label="标题：">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="内容：" >
          <MyEditor    
             ref = "myEditor"
             @change="change"
          />
        </el-form-item>
      </el-form>
  
  
  
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="pulish((dialogVisible = false))">
            发布
          </el-button>
        </span>
      </template>
    </el-dialog>
  
   </el-card>
  
  <!-- 右侧框 -->
   <el-card class="box-card right">
  
    <el-button  v-if="top >= 193"   type="primary"  class="to_top"  @click="toTop"  circle><el-icon><Top /></el-icon>顶部</el-button >
  
      
                  <el-scrollbar height="500px" class="theme" always  @scroll="scroll" ref="bar">
  
                    <h4>全部主题</h4>
  
                     <el-divider />
                    
                        <ThemeItem v-for="item in  discusstionData"  :data="item" :key="item" ></ThemeItem>
                     
                     
                  </el-scrollbar>
      
    </el-card>
    </div>
  
   
    
  </template>
  
  <script>
  import ThemeItem from '../components/ThemeItem.vue'
  import MyEditor from '@/components/MyEditor.vue'
  import discusstion from '../api/discusstion.js'
  import { ElMessage } from 'element-plus'
  import {mapGetters} from 'vuex'
  
  

  export default {
      name: 'TextOnlineSystem2Talk',
  
      data() {
          return {
              discusstionData:[],
             top:0,
             dialogVisible:false,
             form:{
              userId:localStorage.getItem('token'),
              classId:'',
              title:"",
              content:""
            }
          };
      },
  
      //挂在初始化
      mounted() {
        this.initData()
      },
  
      //方法
      methods: {

          initData(){
            console.log(this.getCurrentClassId)
            
              discusstion.getAllDiscusstionBelongClass(this.getCurrentClassId).then((res)=>{
                    if(res.code == 1){
                      this.form.classId = this.getCurrentClassId
                      this.discusstionData = res.data
                    }
                          
              })
          },

          scroll(scrollData){
              this.top = scrollData.scrollTop
            
          },
          toTop(){
              this.$refs.bar.setScrollTop(0)
          },
  
          change(content){
            
            this.form.content = content
            console.log(this.form.content);
          },

          pulish(){

            console.log(this.form)

             discusstion.pulishDiscusstion(this.form).then((res)=>{
                    if(res.code == 1){
                      ElMessage({message: '发布成功',type: 'success',})
                      this.initData()
                    }
                
                    else
                      ElMessage({message: res.msg,type: 'error',})
                         
             })
          },

          
      },

      computed:{
        ...mapGetters(['getCurrentClassId'])
      }
  ,
      components:{
          ThemeItem,
          MyEditor
      },
  
  };
  </script>
  
  <style  scoped>
  
  .discusstion{
    position: fixed;
    top: 8rem;
    width: 88%;
    display:flex;
    flex-direction:row;
    justify-content: space-between;

  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  
  }
  
  .text {
    font-size: 14px;
  
  }
  .el-card{
    /* position: fixed;
    top: 8rem;
    right: 0rem; */
    height: 32.5rem;
  }
  .item {
    margin-bottom: 18px;
  }
  
  
  .left {
  
    width: 40%;
    height:fit-content
  }
  
  
  .right{
    
    position: relative;   
    width: 58%;
    /* height: 35rem; */
  }
  
  .top{
      margin-bottom: 5rem;
  }
  
  .notice{
      font-size: large;
  }
  
  .pulish_btn{
      margin-top:4rem;
  }
  
  .theme{
      box-sizing: border-box;
  }
  
  .to_top{
      position: absolute;
      top:5rem;
      right: 0;
      z-index: 1000;
  }
  
  /* 强制改变 elementUi样式 */
  .el-scrollbar__bar{
    width: 0 !important;
  }
  
  /* .el-main{
    position: fixed;
    top: 8rem;
    height: auto;
    background-color: pink;
  } */
  </style>